<template>
    <div>
        <v-dialog
            title="新增物业信息"
            :show.sync="dialogVisible"
            class="dialogForm"
            width="1200px"
            @beforeClose="beforeClose"
            :close-on-click-modal="false">
            <div class="card-box">
                <div class="card-title">物业信息</div>
                <el-form
                    ref="bulletInformation-form"
                    class="form-wrap"
                    :rules="bulletInformation_rules"
                    :model="bulletInformation">
                    <el-form-item label="楼栋名称" prop="buildingName">
                        <el-input maxlength="25" placeholder="请输入" v-model="bulletInformation.buildingName" :disabled="dbData"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="floorNum">
                        <el-input type="text" maxlength="25" placeholder="请输入" v-model="bulletInformation.floorNum" :disabled="dbData" @blur="handleOnBulr"></el-input>
                    </el-form-item>
                    <el-form-item label="物业名称" prop="propertyName">
                        <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.propertyName" @change="propertyNameOnly"></el-input>
                    </el-form-item>
                    <el-form-item label="曾用名" prop="usedName">
                        <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.usedName"></el-input>
                    </el-form-item>
<!--                    <div class="full">-->
<!--                        <el-row :gutter="10">-->
<!--                            <el-col :span="6">-->
<!--                                <el-form-item label="物业名称" prop="propertyName">-->
<!--                                    <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.propertyName" @change="propertyNameOnly"></el-input>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="6">-->
<!--                                <el-form-item label="曾用名" prop="usedName">-->
<!--                                    <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.usedName"></el-input>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-form-item label="物业地址" prop="address" class="col-two">-->
<!--                                    <el-input maxlength="50" placeholder="请输入" v-model="bulletInformation.address"></el-input>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->
                    <el-form-item label="物业地址" prop="address" class="full">
                        <el-input maxlength="50" placeholder="请输入" v-model="bulletInformation.address"></el-input>
                    </el-form-item>
                    <el-form-item label="初始类别" prop="initialType">
                        <el-select placeholder="请选择" v-model="bulletInformation.initialType">
                            <el-option
                                v-for="item in initialTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物业类型" prop="projectType">
                        <el-select placeholder="请选择" @change="changeProjectType" v-model="bulletInformation.projectType">
                            <el-option
                                v-for="item in propertyTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物业用途" prop="projectSubclassType">
                        <el-select placeholder="请选择"  v-model="bulletInformation.projectSubclassType">
                            <el-option
                                v-for="item in propertyUseTypesFilter"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="规划用途" prop="planUse">
                        <el-select placeholder="请选择" v-model="bulletInformation.planUse">
                            <el-option
                                v-for="item in planUses"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="停车位数(个)" prop="parkingSpotNum" v-if="bulletInformation.planUse === '30'">
                        <el-input maxlength="18" placeholder="仅在规划用途为停车位时填写" v-model="bulletInformation.parkingSpotNum"></el-input>
                    </el-form-item>
                    <el-form-item label="占地面积(m²)" prop="floorSpace">
                        <el-input maxlength="30"  placeholder="请输入" v-model="bulletInformation.floorSpace"></el-input>
                    </el-form-item>
                    <el-form-item label="建筑面积(m²)" prop="buildArea">
                        <el-input maxlength="30" @blur="handleUnitConstractionArea" placeholder="请输入" v-model="bulletInformation.buildArea"></el-input>
                    </el-form-item>
									<el-form-item label="套内面积(m²)" prop="insideArea">
										<el-input maxlength="30" @blur="handleUnitConstractionArea" placeholder="请输入" v-model="bulletInformation.insideArea"></el-input>
									</el-form-item>
									<el-form-item label="经营情况" prop="operation">
										<el-select v-model="bulletInformation.operation" placeholder="请选择经营情况">
											<el-option
												v-for="item in operations"
												:key="item.value"
												:label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
                    <el-form-item label="非经营面积(m²)" prop="unmanagedArea">
                        <el-input maxlength="30"  placeholder="请输入" v-model="bulletInformation.unmanagedArea" @blur="handleAreaCompared"></el-input>
                    </el-form-item>
                    <el-form-item label="经营面积(m²)" prop="managedArea">
                        <el-input maxlength="30"  placeholder="请输入" v-model="bulletInformation.managedArea" @blur="handleAreaCompared"></el-input>
                    </el-form-item>
                    <el-form-item label="分摊公用面积(m²)" prop="noApportionedArea">
                        <el-input maxlength="30"  placeholder="请输入" v-model="bulletInformation.noApportionedArea" @blur="handleNoAppor"></el-input>
                    </el-form-item>
                    <el-form-item label="移交方式" prop="transferType">
                        <el-select placeholder="请选择" v-model="bulletInformation.transferType">
                            <el-option
                                v-for="item in transferModeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="移交单位" prop="transferUnit">
                        <el-input maxlength="25" placeholder="请输入" v-model="bulletInformation.transferUnit"></el-input>
                    </el-form-item>
                    <el-form-item label="移交日期" prop="receiveTime">
                        <el-date-picker
                            v-model="bulletInformation.receiveTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks" class="full">
                        <el-input maxlength="200"  placeholder="请输入" v-model="bulletInformation.remarks"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="foot">
                 <el-button size="small" class="dialog-button-right" @click="handleDialogClear">取消</el-button>
				 <el-button size="small" class="dialog-button-left" type="primary" @click="handleDialogClick">保存</el-button>
            </span>
        </v-dialog>
    </div>
</template>

<script>
    import { doubleValidate, isInt} from '~/utils/validate.js'
    import {validateFacRoomName} from '../../project-manage/api/project_manage'
    export default {
        name: "supporting-facilities-information",
        created() {
            this.initialTypes = this.getDict('project_init_type')
            this.propertyTypes = this.getDict("property_types")
            this.planUses = this.getDict('plan_uses')
            this.transferModeOption = this.getDict('transfer_types')
            this.propertyUseTypes = this.getDict("property_use_types")
            this.operations = this.getDict("property_operations")
        },
        data() {
            let floorNumValidator = (rule, value, callback) => {
                const re =/^-?[1-9]\d*$/;
                const rsCheck = re.test(value);
                if (!rsCheck) {
                    callback(new Error('请输入-20 至 200之间非0的整数'));
                } else {
                    if (value > 200) {
                        return callback(new Error("最大值不超过200"));
                    } else if (value < -20) {
                        return callback(new Error("最小值不能小于-20"));
                    }else {
                        callback();
                    }
                }

            }
            return {

                dialogVisible: false,
                isEdit: false,
                dbData: false,//数据库数据标志
                bulletInformation: {
                    buildingName: '',
                    floorNum: '',
                    propertyName: '',
                    usedName: '',
                    address: '',
                    initialType: '',
                    projectType: '',
                    projectSubclassType: '',
                    planUse: '',
                    parkingSpotNum: '',
                    floorSpace: '',
                    buildArea: '',
									  operation:'20',
									  insideArea:'',
                    unmanagedArea: '',
                    managedArea: '',
                    noApportionedArea: '',
                    transferType: '',
                    transferUnit: '',
                    receiveTime: '',
                    facilitiesId: '',
                    remarks: ''
                },
                initialTypes: [],
                propertyTypes: [],
                propertyUseTypes: [],
                propertyUseTypesFilter: [],
                planUses: [],
                transferModeOption: [],
                bulletInformation_rules: {
                    buildingName: [
                        { required: true, message: "请输入楼栋名称", trigger: "blur" },
                        { min: 0, max: 25, message: "长度在0-25个字符串", trigger: "blur" }
                    ],
                    floorNum: [
                        { required: true, message: "请输入楼层", trigger: "blur" },
                        { validator: floorNumValidator, trigger: "blur" },
                    ],
                    propertyName: [
                        { required: true, message: "请输入物业名称", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ],
                    usedName: [
                        { required: false, message: "请输入曾用名", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ],
                    address: [
                        { required: true, message: "请输入物业地址", trigger: "blur" },
                        { min: 0, max: 50, message: "长度在0-50个字符串", trigger: "blur" }
                    ],
                    initialType: [
                        { required: true, message: "请选择初始类别", trigger: "blur" }
                    ],
                    projectType: [
                        { required: true, message: "请输入物业类型", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ],
                    projectSubclassType: [
                        { required: true, message: "请输入物业用途", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ],
                    planUse: [
                        { required: true, message: "请选择规划用途", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ],
                    parkingSpotNum: [
                        { required: false, message: "请输入停车位数", trigger: "blur" },
                        { validator: isInt, trigger: "blur" },
                    ],
                    floorSpace: [
                        { required: false, message: "请输入占地面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
                    buildArea: [
                        { required: false, message: "请输入建筑面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
									operation: [
                        { required: true, message: "请选择经营情况", trigger: "blur" }
                    ],
									insideArea: [
                        { required: false, message: "请输入套内面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
                    unmanagedArea: [
                        { required: false, message: "请输入非经营面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
                    managedArea: [
                        { required: false, message: "请输入经营面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
                    noApportionedArea: [
                        { required: false, message: "请输入分摊公用面积", trigger: "blur" },
                        { validator: doubleValidate, trigger: "blur" }
                    ],
                    transferType: [
                        { required: false, message: "请输入移交方式", trigger: "blur" },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" }
                    ]
                }
            }
        },
        methods: {

					handleUnitConstractionArea () {
						if (this.bulletInformation.buildArea) {
							if (Number(this.bulletInformation.insideArea) > Number(this.bulletInformation.buildArea)) {
								this.$message.error('套内面积不能大于建筑面积！')
								this.bulletInformation.insideArea = ''
							}
						}
					},
            //打开弹框
            showDialog(item) {
                this.dialogVisible = true
                if (item) {
                    this.bulletInformation = item.row
                    this.isEdit = true
                    if(this.bulletInformation.facilitiesId){
                        this.dbData = true
                    }
                    this.propertyUseTypesFilter = this.propertyUseTypes.filter(ut => ut.value.indexOf(this.bulletInformation.projectType) == 0)
                }
            },
            //关闭弹框
            beforeClose(done) {
                this.$emit('beforeClose')
            },
            //取消
            handleDialogClear() {
                this.$emit('handleClose')
                this.dialogVisible = false
            },
            //保存
            handleDialogClick() {
                this.$refs['bulletInformation-form'].validate((valid) => {
                     if (valid) {
                         this.$emit('handleDialogsSave', {'arr': this.bulletInformation})
                         this.dialogVisible = false
                     }
                })
            },
            //根据物业类型，获取对应的物业用途
            changeProjectType(val){
                //重置物业用途
                this.propertyUseTypesFilter = []
                this.bulletInformation.projectSubclassType =''
                if(val){
                    //过滤物业用途
                    this.propertyUseTypesFilter = this.propertyUseTypes.filter(ut => ut.value.indexOf(val) == 0)
                }
            },
            //所属楼层校验
            handleOnBulr() {
                if (Number(this.bulletInformation.floorNum) > 200) {
                    this.$message.error('所属楼层不得大于200')
                    this.bulletInformation.floorNum = ''
                } else if (Number(this.bulletInformation.floorNum) < -20) {
                    this.$message.error('所属楼层不得小于-20')
                    this.bulletInformation.floorNum = ''
                } else if (Number(this.bulletInformation.floorNum) === 0) {
                    this.$message.error('所属楼层不得等于0')
                    this.bulletInformation.floorNum = ''
                }
            },
            //验证物业名称唯一
            propertyNameOnly(value) {
                validateFacRoomName({"roomName": value, "facId": this.bulletInformation.facilitiesId || ''}).then(res => {
                    if (res.data.data !== 0) {
                        this.$message.error("物业名称已存在，请重新输入！")
                        this.bulletInformation.propertyName = ''
                    }
                })
            },
            // 经营面积失焦校验
            handleAreaCompared() {
                if (Number(this.bulletInformation.unmanagedArea) + Number(this.bulletInformation.managedArea) > Number(this.bulletInformation.buildArea)) {
                    this.$message.error('经营面积+非经营面积之和不能大于建筑面积！')
                    this.bulletInformation.managedArea = ''
                }
            },
            //分摊共用面积
            handleNoAppor() {
                if (Number(this.bulletInformation.noApportionedArea) > Number(this.bulletInformation.buildArea)) {
                    this.$message.error('分摊公用面积不能大于建筑面积！')
                    this.bulletInformation.noApportionedArea = ''
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .dialogForm {
        @include formWrap(4);
    }
</style>
